<!-- 实物奖品详情 -->
<template>
  <a-modal
    v-model:visible="vdata.visible"
    :maskClosable="false"
    :title="'实物奖品详情'"
    :body-style="{ paddingBottom: '80px' }"
    width="40%" 
    :close="onClose"
    :footer="null"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商品名称">
            {{ vdata.detailData.goodsName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="sku">
            {{ vdata.detailData.goodsSku || '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="单价（元）">
            {{ vdata.detailData.goodsPrice==''?'--':vdata.detailData.goodsPrice / 100 }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="预算金额（元）">
            {{ vdata.detailData.goodsAmount==''?'--':vdata.detailData.goodsAmount / 100 }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商品数量">
            {{ vdata.detailData.goodsNum==''?'--':vdata.detailData.goodsNum }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="批次号">
            {{ vdata.detailData.batchNo || '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="机构号">
            {{ vdata.detailData.agentNo || '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="创建时间">
            {{ vdata.detailData.createdAt }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="更新时间">
            {{ vdata.detailData.updatedAt || '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="状态">
            <template v-if="vdata.detailData.state === 0">草稿</template>
            <template v-if="vdata.detailData.state === 1">下线</template>
            <template v-if="vdata.detailData.state === 2">上线</template>
            <template v-if="vdata.detailData.state === 3">已过期</template>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="奖品领取（兑换）过期时间">
            {{ vdata.detailData.goodsOverTime || '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="奖品领取有效天数">
            {{ vdata.detailData.goodsOverDays || '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="核销后奖励福分">
            {{ vdata.detailData.verifiedScore||'--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData.verifiedScore > 0" :sm="12">
        <a-descriptions>
          <a-descriptions-item label="福分过期规则">
            <span v-if="vdata.detailData.scoreOverType == 0">
              {{ '领取后' + vdata.detailData.scoreOverDays + '天过期' }}
            </span>
            <span v-if="vdata.detailData.scoreOverType == 1">
              {{ vdata.detailData.scoreOverTime + '过期' }}
            </span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="商品图片--列表小图（1:1）">
            <img v-if="vdata.detailData['goodsImgListSmall']" :src="vdata.detailData['goodsImgListSmall']" :width="100">
            <template v-else>--</template>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="商品图片--列表大图（16:9）">
            <img v-if="vdata.detailData['goodsImgListBig']" :src="vdata.detailData['goodsImgListBig']" :width="100">
            <template v-else>--</template>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="商品图片--banner">
            <div v-if="vdata.detailData.goodsImgBanner?.length">
              <img v-for="(item,index) in vdata.detailData['goodsImgBanner']" :key="index" :src="item" :width="100">
            </div>
            <template v-else>--</template>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="商品详情(富文本)">
            <a-textarea v-model:value="vdata.detailData['goodsDetail']" :rows="3" disabled="disabled" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="备注">
            <a-textarea v-model:value="vdata.detailData['remark']" :rows="3" disabled="disabled" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script lang="ts" setup>
import {$goodsDetail} from '@/api/awardMange/goods/index'
import { reactive } from 'vue'
import { useUserStore } from '@/store/modules/user'

const vdata: any = reactive({
  btnLoading: false,
  detailData: {}, // 数据对象
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
})

/**
 * 进度条
 * @param isShowGlobalLoadingVal 
 */
function myGlobalLoadingFunc(isShowGlobalLoadingVal) {
  useUserStore().setGlobalLoading(isShowGlobalLoadingVal)
}

async function show(goodsId) { // 弹层打开事件
  // 请求详情数据
  await getGoodsDetail(goodsId)
  vdata.visible = true
}
// 请求实物奖品详情
async function getGoodsDetail(goodsId){
  try {
    myGlobalLoadingFunc(true)
    const res = await $goodsDetail({ goodsId })
    const { goodsImgBanner } = res
    vdata.detailData = { ...res, goodsImgBanner: goodsImgBanner ? goodsImgBanner?.split(',') : [], ...res.awardSetting }
  } finally {
    myGlobalLoadingFunc(false)
  }
}
function onClose() {
  vdata.visible = false
}
defineExpose({
  show //抛出show函数给父组件
})
</script>
